<template>
  <van-nav-bar
    title="注册页"
    left-text="返回"
    right-text="去登录"
    left-arrow
    @click-left="onClickLeft"
    @click-right="onClickRight"
  />
  <!-- <div class="wrap">
    <p><span>用户名：</span><input type="text" v-model="username" /></p>
    <p><span>密码：</span><input type="password" v-model="password" /></p>
    <p><span>重复密码：</span><input type="password" v-model="rpassword" /></p>
    <p><span>昵称：</span><input type="text" v-model="nickname" /></p>
    <p><button @click="resetFn">重置</button><button @click="registerFn">注册</button></p>
  </div> -->
  <van-form @submit="registerFn">
    <van-cell-group inset>
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ pattern: /^[a-z0-9]\w{4,11}$/, message: '以小写字母、数字开头，4~11位' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ pattern: /\w{6,12}/, message: '6~12位' }]"
      />
      <van-field
        v-model="rpassword"
        type="password"
        name="重复密码"
        label="重复密码"
        placeholder="重复密码"
        :rules="[{ validator, message: '两次密码不一致' }]"
      />
      <van-field
        v-model="nickname"
        name="昵称"
        label="昵称"
        placeholder="昵称"
        :rules="[{ pattern: /\w{2,12}/, message: '2~12位' }]"
      />
    </van-cell-group>
    <div class="box" style="margin: 16px">
      <van-button round block type="primary" @click="resetFn">重置</van-button>
      <van-button round block type="primary" native-type="submit">登录</van-button>
    </div>
  </van-form>
</template>
<script>
import http from "@/utils/http.js";
export default {
  data() {
    return {
      username: "",
      password: "",
      rpassword: "",
      nickname: ""
    };
  },
  methods: {
    // 校验函数返回 true 表示校验通过，false 表示不通过
    validator() {
      return this.password == this.rpassword;
    },
    onClickLeft() {
      this.$router.replace("/");
    },
    onClickRight() {
      this.$router.push("/login");
    },
    resetFn() {
      this.username = "";
      this.password = "";
      this.nickname = "";
      this.rpassword = "";
    },
    registerFn() {
      console.log("注册");
      console.log(this.username, this.password, this.rpassword, this.nickname);
      http
        .request({
          url: "/users/register",
          method: "POST",
          data: {
            username: this.username,
            password: this.password,
            rpassword: this.rpassword,
            nickname: this.nickname
          }
        })
        .then((v) => {
          if (v.data.code) {
            showNotify({ type: "success", message: v.data.message });
            this.$router.replace("/login");
          } else {
            console.log(v.data);
            showNotify({ type: "warning", message: v.data.message });
          }
        });
    }
  }
};
</script>
<style lang="css" scoped>
.wrap {
  width: 322.5px;
  /* height: 500px; */
  margin: 100px auto;
}
.wrap > p {
  box-sizing: border-box;
  width: 100%;
  height: 25px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
}
.box {
  display: flex;
  justify-content: space-around;
}
.van-button--round {
  width: 30%;
}
</style>
